<!-- 部门管理 -->
<template>
    <div class="organization-list-page" v-loading="loading">
        <el-form :inline="true" :model="searchForms" ref="form">
            <el-form-item label="部门名称">
                <el-input v-model="searchForms.name"></el-input>
            </el-form-item>
            <el-form-item label="部门Code">
                <el-input v-model="searchForms.code"></el-input>
            </el-form-item>
            <!-- <el-form-item label="">
                <el-checkbox  v-model="searchForms.isShare">是否显示共享</el-checkbox >
            </el-form-item> -->
            <el-form-item>
                <el-button :loading="loading" type="primary" plain @click="onSearch">查询</el-button>
                <el-button type="primary" plain @click="addNewOrganization">添加部门</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="list" :header-cell-style="{ background: '#e8e8e8' }" style="width: 100%; margin: 20px 0">
            <!-- <el-table-column fixed prop="organizationPrimaryKey" label="部门id" width="100" :show-overflow-tooltip="true"></el-table-column> -->

            <el-table-column fixed prop="index" width="80" :show-overflow-tooltip="true" type="index"></el-table-column>
            <el-table-column prop="name" label="部门名称" width="150" sortable></el-table-column>
            <el-table-column prop="code" label="部门编码" width="150" sortable></el-table-column>
            <el-table-column prop="level" label="部门级别" width="150" sortable></el-table-column>
            <!-- <el-table-column prop="isShare" label="是否是共享" width="150" sortable>
                <template #default="scope">
                    <span v-if="scope.row.isShare == 1">共享</span>
                    <span v-else>否</span>
                </template>
            </el-table-column> -->
            <el-table-column prop="leaderEmployeeName" label="部门主管" width="150" sortable></el-table-column>
            <el-table-column prop="parentOrganizationName" label="上级部门" width="150" sortable></el-table-column>
            <el-table-column prop="sort" label="序号" width="100" :show-overflow-tooltip="true"
                sortable></el-table-column>
            <!-- <el-table-column prop="isDeleted" label="是否删除" min-width="100">
                <template #default="scope">
                    <span v-if="scope.row.isDeleted == 1">已删除</span>
                    <span v-else>否</span>
                </template>
            </el-table-column> -->
            <el-table-column prop="createUserName" label="创建人" min-width="100"
                :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="createTime" label="创建时间" min-width="100" :show-overflow-tooltip="true">
                <template #default="scoped">
                    {{ dateUtil.formatDateTime(scoped.row.createTime) }}
                </template>
            </el-table-column>
            <el-table-column prop="updateUserName" label="更新人" min-width="100"
                :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="updateTime" label="更新时间" min-width="100" :show-overflow-tooltip="true">
                <template #default="scoped">
                    {{ dateUtil.formatDateTime(scoped.row.updateTime) }}
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" min-width="100">
                <template #default="scope">
                    <el-tooltip content="编辑" effect="dark">
                        <el-button @click="edit(scope.row)" type="text" class="icon_btn icon iconfont iconedit">
                            <el-icon :size="20">
                                <iconify icon="material-symbols:edit-square-outline"></iconify>
                            </el-icon>
                        </el-button>
                    </el-tooltip>
                    <el-tooltip content="删除" effect="dark">
                        <el-button @click="remove(scope.row)" type="text">
                            <el-icon :size="22">
                                <iconify icon="material-symbols-light:delete-outline"></iconify>
                            </el-icon>
                        </el-button>
                    </el-tooltip>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination class="pagination_customer" @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="page.pageNum" :page-sizes="[10, 20, 50, 100, 500]" :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="page.total">
        </el-pagination>

        <el-drawer v-model="showDrawer" size="89%" @close="closeDrawer" destroy-on-close>
            <edit-organization :organization="editOrganization" @closeDrawer="closeDrawer"></edit-organization>
        </el-drawer>
    </div>
</template>

<style lang='scss' scoped></style>
<script>
import { getOrganizationList, removeOrganization } from '@/api/organization.js'
import dateUtil from '@/utils/dateUtil.js'
import {
  ElMessage, ElMessageBox
} from 'element-plus'
import editOrganization from './components/editOrganization.vue'
const editObj =  { corpKey: '',  organizationPrimaryKey: '', parentKey: '', name: '', code: '', isDeleted: 0, level: 0, type: 0, typeName: '', path: '', isShare: 0, corpName: '', leaderEmployeeKey: ''}
export default {
    components: {editOrganization},
    data() {
        return {
            showDrawer: false,
            loading: false,
            searchForms: {
                name: '',
                code: '',
                isShare: null,
            },
            list: [],
            page: {
                pageNum: 1,
                pageSize: 10,
                total: 0
            },
            dateUtil,
            editOrganization: {},
        };
    },
    computed: {},
    watch: {},
    methods: {
        async onSearch() {
            this.loading = true
            let searchForms = this.searchForms
            let param = {
                nameFuzzy: searchForms.name,
                codeFuzzy: searchForms.code,
                needShare: searchForms.isShare == true ? 1 : 0,
                currentPage: this.page.pageNum,
                pageSize: this.page.pageSize
            }
            let resp = await getOrganizationList(param)
            let respData = resp.data
            if (respData && respData.success == false) {
                ElMessage.error(`${respData.message}`)
                loading.value = false
                return
            }
            this.loading = false
            this.list = respData.rows
            this.page.total = respData.total
        },
        addNewOrganization() {
            this.editOrganization = JSON.parse(JSON.stringify(editObj))
            this.openDrawer();
        },
        edit(row) {
            let cloneObj = JSON.parse(JSON.stringify(editObj))
            for(var key in cloneObj){
                    cloneObj[key] = row[key] ||  cloneObj[key] 
            }
            this.editOrganization = cloneObj
            this.openDrawer();
        },
        openDrawer() {
            this.showDrawer=true;
        },
        closeDrawer(){
            this.onSearch()
            this.showDrawer=false;
        },
        handleSizeChange(size) {
            if(size==null){return;}
            this.page.pageSize = size
            this.onSearch();
        },
        handleCurrentChange(num) {
            if(num==null){return;}
            this.page.pageNum = num
            this.onSearch();
        },
       async remove(data) {
            ElMessageBox.confirm('是否删除当前部门：'+data.name+'?','删除提示',{
                distinguishCancelAndClose: true,
                confirmButtonText: '确认删除',
                cancelButtonText: '取消'
            }).then( async ()=>{
                let res=await removeOrganization({organizationPrimaryKeys:[data.organizationPrimaryKey]})
                let resp = res.data
                if(resp&&resp.success==true){
                    ElMessage.success("删除成功！");
                    this.onSearch();
                }
            }).catch(action=>{    
                this.$message.success('已取消删除')
            })
        }
    },
    created() {
        this.onSearch()
    },
    mounted() {

    },
}
</script>